import { useLayoutEffect, useEffect, useState, useReducer } from "react"
import { produce } from 'immer'

function reducer(state, action) {
    // { result: 0 }  { type: 'add', num: 2 }
    console.log(state, action);

    switch (action.type) {
        case 'add':
            return produce(state, (state) => {
                state.result += action.num;
            })
        case 'minus':
            return produce(state, (state) => {
                state.result -= action.num;
            })
    }
}

function App() {
    const [res, dispatch] = useReducer(reducer, { result: 0 })


    return (
        <div>
            <h3>{res.result}</h3>
            <button onClick={() => dispatch({ type: 'add', num: 2 })}>+</button>
            <button onClick={() => dispatch({ type: 'minus', num: 2 })}>-</button>
        </div>
    )
}

export default App